 @media screen and (min-width: 1079px) and (max-width:1366px) { 
   .modal-dialog{
      width: 90%;
   }
   .bayonet-body{
      height: 565px;
   }
   .bayonet-text{
      width: 72%;
   }
   .bayonet-start-date, .bayoent-end-date{
      width: 180px;
   }
   .show-face{
      height: 516px;
   }
   .face-box{
      height: 476px;
   }
   .tree_box{
      width: 100%;
      height: 522px;
      clear: both;
      overflow: scroll;
   } 
   .modal_box{
      overflow: scroll;
      height: 696px;
   }
   .car-table-box{
      height: 490px;
   }
   .normal-face{
      width: 158px;
      margin: 0;
   }
   .face-contrast .reduced{
      position: absolute;
      left: 42%;
      top: 28%;
   }
   .face-pictrue{
      padding: 0;
   }
   .out-face{
      margin: 7px 0 0 4px;
   }
   .face-contrast{
      padding: 0 0 0 10px;
   }
   .contrast{
      margin: 0.4% 0 0.3% 1.1%;
   }

}


@media screen and (min-width: 1367px) and (max-width: 1600px) {
   .modal-dialog{
      margin: 80px auto;
   }
   .bayonet-left{
      position: relative;
   }
   .tree_box{
      width: 100%;
      position: absolute;
      top: 43px;
      left: 0;
      bottom: 0;
      overflow: scroll;
   }
   .show-face{
      height: 638px;
   }
   .col-md-3{
      width: 23%;
   }
   .col-md-7{
      width: 60%;
   }
   .bayonet-body{
      height: 680px;
   }
   .face-box{
      height: 100%;
   }
   .car-table-box{
      height: 600px;
   }
   .modal_box{
      height: 100%;
      overflow: scroll;
   }
   .modal-body{
      height: 910px;
   }
   .normal-face{
      width: 154px;
      margin: 0 0 0 4px;
   }
   .import-face{
      width: 144px;
   }
   .face-contrast .reduced{
      position: absolute;
      left: 42.6%;
      top: 28%;
   }
   .show-pictrue{
      padding: 10px 0 0 4px;
   }
   .out-face{
      margin: 8px 0 0 2px;
   }
   .contrast{
      margin: 0 0 1.3% 1.1%;
   }
} 

@media screen and (min-width: 1601px){
   .modal-dialog{
      margin: 80px auto;
   }
   .bayonet-left{
      position: relative;
   }
   .contrast{
      margin: 0.2% 0 1% 1.1%;
   }
   .tree_box{
      width: 100%;
      position: absolute;
      top: 43px;
      left: 0;
      bottom: 0;
      overflow: scroll;
   }
   .show-face{
      height: 638px;
   }
   .col-md-3{
      width: 23%;
   }
   .col-md-7{
      width: 60%;
   }
   .bayonet-body{
      height: 680px;
   }
   .face-box{
      height: 100%;
   }
   .car-table-box{
      height: 600px;
   }
   .modal_box{
      height: 100%;
      overflow: scroll;
   }
   .modal-body{
      height: 910px;
   }
   .normal-face{
      margin: 0 0 0 6%;
   }
   .face-contrast .reduced{
      position: absolute;
      left: 43%;
      top: 28%;
   }
} 